/*
 * @Author: yangzonglong
 * @Date: 2021-07-08 14:12:22
 * @version: v1.0.0
 * @Descripttion: Table Radio 控制器
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-12 09:27:53
 * @Auditor:
 */
import React from 'react';
import { Form, Checkbox, Input, Radio, InputNumber, Slider, Dropdown, Divider } from 'antd';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
import { SketchPicker } from 'react-color';

interface IProps {
  title?: string;
  titleEn?: string;
  dataIndex?: string;
  textAlign?: string;
  showTextAlign?: boolean;
  width?: number | string;
  required?: boolean;
  hideRequire?: boolean;
  print?: boolean;
  isInput?: boolean;
  radio?: boolean;
  showIsRadio?: boolean;
  disabled?: boolean;
  exportFlag?: boolean;
  hideInput?: boolean;
  onChangeControlProps: (e: React.ChangeEvent | CheckboxChangeEvent, k: string, isChecked?: boolean) => void;
  onChangeColumnOptions?: (e: React.ChangeEvent | CheckboxChangeEvent, k: string, isChecked?: boolean) => void;
  children?: React.ReactNode;
  fontSize?: number;
  backgroundColor?: string;
  fontWeight?: number;
  color?: string;
  customizeStyleFlag?: boolean;
}

const defaultWidth = 150;
const columnsWidthOptions = [106, 136, 200, 376, '106', '136', '200', '376'];

const CheckBoxController = ({
  title,
  titleEn,
  dataIndex,
  textAlign,
  showTextAlign,
  width,
  required,
  print,
  hideRequire,
  hideInput,
  isInput,
  disabled,
  exportFlag,
  radio,
  showIsRadio,
  onChangeControlProps,
  onChangeColumnOptions,
  children,
  fontSize,
  backgroundColor,
  fontWeight,
  color,
  customizeStyleFlag
}: IProps) => {

  function changeTbodyTdStyle(key: string, e: string | number | boolean | object) {
    onChangeControlProps({ target: { value: e } } as any, key);
  }

  return (
    <>
      <Form.Item label="标题">
        <Input.TextArea onChange={(e) => onChangeControlProps(e, 'title')} value={title} />
      </Form.Item>

      <Form.Item label="标题(EN)">
        <Input.TextArea onChange={(e) => onChangeControlProps(e, 'titleEn')} value={titleEn} />
      </Form.Item>

      <Form.Item label="value">
        <Input onChange={(e) => onChangeControlProps(e, 'dataIndex')} value={dataIndex} />
      </Form.Item>

      {children}

      {showTextAlign && <Form.Item label="对齐方式">
        <Radio.Group value={textAlign} onChange={(e) => onChangeControlProps(e, 'textAlign')}>
          <Radio.Button value={'left'}>左对齐</Radio.Button>
          <Radio.Button value={'center'}>居中对齐</Radio.Button>
          <Radio.Button value={'right'}>右对齐</Radio.Button>
        </Radio.Group>
      </Form.Item>}

      <Form.Item label="子字段宽度">
        <Radio.Group value={columnsWidthOptions.includes(width as number) ? +width! : defaultWidth} onChange={(e) => onChangeControlProps(e, 'width')}>
          <Radio.Button value={106}>微</Radio.Button>
          <Radio.Button value={136}>小</Radio.Button>
          <Radio.Button value={200}>中</Radio.Button>
          <Radio.Button value={376}>大</Radio.Button>
          <Radio.Button value={defaultWidth}>自定义</Radio.Button>
        </Radio.Group>
        <div style={{ marginTop: '8px' }}>
          <InputNumber disabled={columnsWidthOptions.includes(width as number)} onBlur={(e) => onChangeControlProps(e, 'width')} value={width} step={1} style={{ width: '100%' }} />
        </div>

      </Form.Item>

      {!hideRequire && <Form.Item className="antd-form-item-row" label="必填">
        <Checkbox onChange={(e) => onChangeColumnOptions?.(e, 'required', true)} checked={required} style={{ marginTop: '16px' }} />
      </Form.Item>}

      {
        showIsRadio && <Form.Item className="antd-form-item-row" label="多选" >
          <Checkbox onChange={(e) => onChangeControlProps(e, 'radio', true)} checked={radio} />
        </Form.Item>
      }

      <Form.Item className="antd-form-item-row" label="打印" >
        <Checkbox onChange={(e) => onChangeControlProps(e, 'print', true)} checked={print !== false} />
      </Form.Item>

      <Form.Item className="antd-form-item-row" label="禁用" >
        <Checkbox onChange={(e) => onChangeControlProps(e, 'disabled', true)} checked={disabled} />
      </Form.Item>

      <Form.Item className="antd-form-item-row" label="导出" >
        <Checkbox onChange={(e) => onChangeControlProps(e, 'exportFlag', true)} checked={exportFlag !== false} />
      </Form.Item>

      {isInput && <Form.Item className="antd-form-item-row" label="隐藏域">
        <Checkbox onChange={(e) => onChangeControlProps(e, 'hideInput', true)} checked={hideInput} />
      </Form.Item>}

      <Divider />

      <Form.Item className="antd-form-item-row" label="自定义样式" >
        <Checkbox onChange={(e) => onChangeControlProps(e, 'customizeStyleFlag', true)} checked={customizeStyleFlag} />
      </Form.Item>

      {customizeStyleFlag && (
        <>
          <Form.Item label="文字大小" >
            <Slider
              step={1}
              min={12}
              max={28}
              value={fontSize}
              onChange={(value: any) => changeTbodyTdStyle('fontSize', value)} />
          </Form.Item>

          <Form.Item label="文字加粗" >
            <Slider
              step={100}
              min={100}
              max={600}
              value={fontWeight}
              onChange={(value: any) => changeTbodyTdStyle('fontWeight', value)} />
          </Form.Item>

          <Dropdown
            trigger={['click']}
            placement='top'
            overlay={
              <SketchPicker
                color={backgroundColor}
                onChange={(color) => changeTbodyTdStyle('backgroundColor', color.hex.toLocaleUpperCase())} />
            }
          >
            <Form.Item label='背景颜色'>
              <Input
                readOnly
                value={backgroundColor}
              />
            </Form.Item>
          </Dropdown>

          <Dropdown
            trigger={['click']}
            placement='top'
            overlay={
              <SketchPicker
                color={color}
                onChange={(color) => changeTbodyTdStyle('color', color.hex.toLocaleUpperCase())} />
            }
          >
            <Form.Item label='文字颜色'>
              <Input
                readOnly
                value={color}
              />
            </Form.Item>
          </Dropdown>
        </>
      )}
    </>
  );
};

export default CheckBoxController;
